<template>
  <div class="comment-container">
    <LayoutHeaderTitle title="我的评价" />
    <van-tabs class="tabs" v-model="order_status" @change="tabChange">
      <van-tab title="已评价" name="已评价" />
      <van-tab title="未评价" name="已收货" />
    </van-tabs>
    <ul class="comment-list">
      <template v-if="order_status === '已评价'">
        <li v-for="item in commentList" :key="item.comment_id">
          <div class="content-text" v-text="item.comment_content" />
          <nuxt-link
            :to="{ name: 'goods-id', params: { id: item.g_id } }"
            class="cl padding"
          >
            <img class="img" :src="item.g_src | formatSrc" :alt="item.g_name" />
            <div class="info">
              <p class="name text-over" v-text="item.g_name" />
              <p class="spec-name text-over" v-text="item.spec_name" />
              <p v-text="'￥' + (item.discounted_price || item.sell_price)" />
            </div>
          </nuxt-link>
        </li>
      </template>
      <template v-if="order_status === '已收货'">
        <li v-for="item in commentList" :key="item.order_id">
          <nuxt-link
            :to="{ name: 'store-id', params: { id: item.b_id } }"
            v-text="item.b_name"
            class="store"
          />
          <nuxt-link
            :to="{ name: 'order-id', params: { id: item.order_id } }"
            class="cl"
          >
            <div class="cl" v-for="g in item.goods" :key="g.order_detail_id">
              <img class="img" :src="g.g_src | formatSrc" :alt="g.g_name" />
              <div class="info">
                <p class="name text-over" v-text="g.g_name" />
                <p class="spec-name text-over" v-text="g.spec_name" />
              </div>
            </div>
            <div class="btn">
              <nuxt-link
                :to="{
                  name: 'order-comment',
                  params: { id: item.order_id }
                }"
              >
                <van-button color="#ff6034" plain round>
                  评论
                </van-button>
              </nuxt-link>
            </div>
          </nuxt-link>
        </li>
      </template>
    </ul>
  </div>
</template>
<script>
export default {
  layout: "notabbar",
  async asyncData({ app }) {
    const order_status = "已评价",
      commentList = [];
    try {
      const { data } = await app.$apiGetCommentList({ order_status });
      commentList.push(...data);
    } catch (error) {}
    return { commentList, order_status };
  },
  data: () => ({
    order_status: "已评价",
    commentList: []
  }),
  methods: {
    getList(data) {
      return new Promise((resolve, reject) => {
        this.$apiGetCommentList(data)
          .then(res => {
            const { status, data } = res;
            if (status === 0) {
              this.commentList = data;
            }
          })
          .finally(resolve);
      });
    },
    tabChange(val) {
      const loading = this.$helperLoadding();
      this.commentList = [];
      this.getList({ order_status: val }).then(() => loading.clear());
    }
  }
};
</script>
<style lang="scss" scoped>
.comment-container {
  padding: 100px 10px 20px;
  height: 100vh;
  box-sizing: border-box;
  overflow-y: auto;
  background: #f3f3f3;
  ::v-deep .header {
    background: inherit;
    color: inherit;
  }
}
.tabs {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  height: 50px;
  background: inherit;
  z-index: 1;
  ::v-deep .van-tabs__nav {
    background: inherit;
  }
}
.comment-list {
  font-size: 14px;
  a {
    color: inherit;
  }
  .img {
    width: 80px;
    float: left;
    margin-right: 10px;
  }
  li {
    padding: 10px;
    border-radius: 10px;
    background: #fff;
    margin-bottom: 15px;
  }
  p {
    margin: 0 0 5px;
  }
  .spec-name {
    color: #c1c1c1;
  }
  .store {
    display: block;
    color: #000;
    margin-bottom: 5px;
  }
  .content-text {
    margin-bottom: 10px;
  }
  .padding {
    display: block;
    border-radius: 5px;
    border: 1px solid #eee;
    padding: 5px 10px;
  }
  .btn {
    display: flex;
    justify-content: flex-end;
    ::v-deep button {
      height: 20px;
      line-height: 20px;
    }
  }
}
</style>
